<template>
  <div class="card">
    <div class="cardTitle flex">
      <div class="cardTitleContent flex">
        <slot name="titleImg"></slot>
      </div>
    </div>
    <div class="cardContent">
      <p class="contentTitle"><slot name="contentTitle"></slot></p>
      <p class="contents"><slot name="contents"></slot></p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.card {
  width: 260px;
  padding-left: 10px;
  padding-right: 10px;
  height: 200px;
  flex: 1;
  margin-right: 30px;
}
.cardTitle {
  width: 100%;
  height: 120px;
}
.cardTitleContent {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:$bgcolor-bluer;
}
.cardTitleContent img {
  width: 56px;
  height: 56px;
}
.contentTitle {
  font-weight: bold;
  font-size: 1rem;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  color:$color-normal-light;
}
.contents {
  font-size: 0.9rem;
  color: $color-assist-light;
  text-align: center;
}
</style>